<template>
    <div class="numSelectContain">
        <a @click="add()">
            <svg viewBox="0 0 44 44" id="cart-minus" width="100%" height="100%"><path fill="none" d="M0 0h44v44H0z"></path><path fill-rule="evenodd" d="M22 0C9.8 0 0 9.8 0 22s9.8 22 22 22 22-9.8 22-22S34.2 0 22 0zm10 24h-8v8c0 1.1-.9 2-2 2s-2-.9-2-2v-8h-8c-1.1 0-2-.9-2-2s.9-2 2-2h8v-8c0-1.1.9-2 2-2s2 .9 2 2v8h8c1.1 0 2 .9 2 2s-.9 2-2 2z" clip-rule="evenodd"></path></svg>
        </a>
        <span class="context"  v-show="conut>0" >{{conut}}</span>
        <!-- <div class="buttonsubtra button" @click="subtraction()" v-show="conut>0">&minus;</div> -->

        <a @click="subtraction()" v-show="conut>0">
            <svg viewBox="0 0 44 44" id="cart-add" width="100%" height="100%"><path fill-rule="evenodd" d="M22 0C9.8 0 0 9.8 0 22s9.8 22 22 22 22-9.8 22-22S34.2 0 22 0zm0 42C11 42 2 33 2 22S11 2 22 2s20 9 20 20-9 20-20 20z" clip-rule="evenodd"></path><path fill-rule="evenodd" d="M32 20c1.1 0 2 .9 2 2s-.9 2-2 2H12c-1.1 0-2-.9-2-2s.9-2 2-2h20z" clip-rule="evenodd"></path></svg>
        </a>
        
    </div>
    
</template>


<script>
export default {
    data(){
        return {
            conut:0,
        }
    },
    props:["buyList","goodsId","initCount"],
    methods:{
        subtraction(){
            if(this.conut <= 0){
                this.conut = 0
                return;
            }
            this.conut = this.conut-1;
            result = this.$emit("subtraction",this.conut)
           
        },
        add(){
            this.conut = this.conut+1;
            let result = this.$emit("add",this.conut)
        },
       
       
       
    },
    mounted() {
        if(this.initCount!=null){
            this.conut = this.initCount
        }
    },
    watch:{
        buyList:{
            　handler(newValue, oldValue) {
                let goodsInfo = newValue[this.goodsId];
                 if(goodsInfo == null){
                    return;
                 }
                 let count = goodsInfo["count"];
                 if(count!=null){
                     this.conut = count
                 }
                 
        　　　　},
　　　　        deep: true
        },


    }
}
</script>


<style lang="less" scoped>

    svg{
            width: .586667rem;
    width: 5.866667vw;
    height: .586667rem;
    height: 5.866667vw;
    vertical-align: middle;
    fill: #2396ff;
    }

    .numSelectContain{
        
        width: 80px;
        height: 20px;
        .buttonsubtra{
             color:  #00a2ff;
            background-color:#fff;
            border: 2px solid #00a2ff;
            //line-height: 25px;
        }
        .context{
            display: inline-block;
            text-align: center;
            color: rgba(0,0,0,.87);
            vertical-align: middle;
            font-size: 16px;
            width: 6.933333vw;
            overflow: hidden;
            float: right;
        }
    }


    a{
       
        float: right;
    }


</style>
